<template>
  <div id="app">
    <!-- 分片渲染组件 -->
    <ShardList v-if="isShardList" />
    <!-- 虚拟列表 固定列表高度 -->
    <VirtualList :size="40" :remain="8" :dataList="items" v-if="isVirtualList">
      <!-- 
        使用插槽我们可以随意改变渲染结构的样式
        如果不适用插槽，那么数据在子组件渲染，这个时候如果我们多出地方使用并且样式不一样，可扩展性不高，所以使用插槽
        固定高度的 虚拟列表 主要思路时，每次滑动根据滚动距离 去计算开始位置和结束位置的数据，重新渲染数据
       -->
      <template #default="{ item }">
        <div style="height: 40px; border: 1px solid red">
          {{ item.id }}
        </div>
      </template>
    </VirtualList>

    <!-- 虚拟列表 列表高度不固定 -->
    <VirtualListNoHeight
      :size="80"
      :remain="8"
      :dataList="dataList"
      v-if="isisVirtualHeightList"
    >
      <template #default="{ item }">
        <div style="padding: 20px; border: 1px solid red">
          {{ item.value }}
        </div>
      </template>
    </VirtualListNoHeight>
  </div>
</template>

<script>
import ShardList from "./components/shard-list.vue";
import VirtualList from "./components/virtual-list.vue";
import VirtualListNoHeight from "./components/virtual-list-no-height.vue";
import Mock from "mockjs";
let items = [];
for (let i = 0; i < 10000; i++) {
  items.push({ id: i, value: i });
}
let dataList = [];
for (let i = 0; i < 10000; i++) {
  // 随机生成 5 - 10个句子的中文段落
  dataList.push({ id: i, value: Mock.Random.cparagraph(5, 15) });
}
export default {
  name: "App",
  components: {
    ShardList,
    VirtualList,
    VirtualListNoHeight
  },
  data() {
    return {
      isShardList: false,
      isVirtualList: false,
      isisVirtualHeightList: true,
      items,
      dataList
    };
  }
};
</script>

<style lang="scss"></style>
